<template>
  <div class="drawer-wrap">
    <div class="drawer-head">
      <div class="font-16">
        <div slot="title">{{ title }}</div>
      </div>
    </div>
    <div class="drawer-body pd-40 pt-20">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="80px"
        class="demo-ruleForm"
        size="medium"
      >
        <el-form-item class="border-bottom" label="适用人群" prop="roleCode"  :rules="{
          required: true,
          message: '适用人群',
          trigger: 'change'
        }">
          <el-select
          v-model="ruleForm.roleCode"
          :disabled="drawerData.type === 'look'"
          multiple
          placeholder="请选择"
          size="mini"
          style="width: 350px">
            <el-option
            v-for="item in roleCodeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item class="border-bottom" label="体温" prop="name">
          ≥<el-input
              :disabled="drawerData.type === 'look'"
              oninput ="value=value.replace(/[^0-9.]/g,'')"
              size="mini"
              style="width: 70px"
              v-model.trim="ruleForm.bodyTemperature"
            ></el-input>℃
        </el-form-item>
        <el-form-item class="border-bottom" label="健康码" prop="region">
          <el-checkbox-group :disabled="drawerData.type === 'look'" v-model="ruleForm.healthCodeStatus">
            <el-checkbox label="黄码" name="黄码"></el-checkbox>
            <el-checkbox label="红码" name="红码"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="border-bottom" label="核酸" prop="region">
          <el-checkbox-group :disabled="drawerData.type === 'look'" v-model="ruleForm.nucleicAcidStatus">
            <el-checkbox label="阴性" name="阴性"></el-checkbox>
            <el-checkbox label="阳性" name="阳性"></el-checkbox>
          </el-checkbox-group>
          <div>
            无
            <el-input
              :disabled="drawerData.type === 'look'"
              oninput ="value=value.replace(/[^0-9.]/g,'')"
              size="mini"
              style="width: 70px"
              v-model.number.trim="ruleForm.nucleicAcidStatusDays"
            ></el-input>
            小时内核酸阴性报告
          </div>
        </el-form-item>
        <el-form-item class="border-bottom" label="抗原" prop="region">
          <el-checkbox-group :disabled="drawerData.type === 'look'" v-model="ruleForm.antigenStatus">
            <el-checkbox label="阴性" name="阴性"></el-checkbox>
            <el-checkbox label="阳性" name="阳性"></el-checkbox>
          </el-checkbox-group>
          <div>
            无
            <el-input
              :disabled="drawerData.type === 'look'"
              oninput ="value=value.replace(/[^0-9.]/g,'')"
              size="mini"
              style="width: 70px"
              v-model.number.trim="ruleForm.antigenStatusDays"
            ></el-input>
            小时内抗原阴性报告
          </div>
        </el-form-item>
        <el-form-item class="border-bottom" label="疫苗" prop="delivery">
          <el-checkbox-group :disabled="drawerData.type === 'look'" v-model="ruleForm.vaccineStatus">
            <el-checkbox label="未接种" name="未接种"></el-checkbox>
            <el-checkbox label="接种一针" name="接种一针"></el-checkbox>
            <el-checkbox label="接种两针" name="接种两针"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="流调" prop="type">
          <div>
            <div class="item" v-for="(item,index) in surveyList" :key="index">
              <div class="label">
                <span v-if="index === 1 || index === 2">近 <el-input :disabled="drawerData.type === 'look'" oninput ="value=value.replace(/[^0-9.]/g,'')" size="mini" style="width: 70px" v-model.number.trim="ruleForm[item.dayNum]"></el-input></span>
                 {{item.label}}
              </div>
              <el-radio-group v-model="ruleForm[item.prop]" :disabled="drawerData.type === 'look'">
                <el-radio label="是" @click.native.prevent="changeValue('是', item.prop)">是</el-radio>
                <el-radio label="否" @click.native.prevent="changeValue('否', item.prop)">否</el-radio>
              </el-radio-group>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="ruleForm.tiggerType" :disabled="drawerData.type === 'look'">
            <el-radio :label="0">上述任一满足？</el-radio>
            <el-radio :label="1">上述同时满足?</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="drawer-foot">
      <el-button size="small" type="primary" @click="handleSave" v-if="drawerData.type !== 'look'">确定</el-button>
      <el-button size="small" @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { findPreventionRiskRulesDetail, savePreventionRiskRules, refreshRiskScreenData } from '@/views/children/antiepidemic/js/preventionRiskScreen'
export default {
  props: {
    drawerData: {
      type: Object
    }
  },
  data () {
    return {
      ruleForm: {
        bodyTemperature: null,
        healthCodeStatus: [],
        nucleicAcidStatus: [],
        nucleicAcidStatusDays: null,
        antigenStatus: [],
        antigenStatusDays: null,
        vaccineStatus: [],
        inShFlag: null,
        tiggerType: 0,
        roleCode: [],
        leavePossessionFlag: null,
        confirmFlag: null,
        symptomFlag: null,
        healthFlag: null,
        passModerateAddr: null,
        passHightAddr: null
      },
      roleCodeList: [
        { value: '1', label: '教职工' },
        { value: '2', label: '学生' },
        { value: '3', label: '同住人' },
        { value: '4', label: '校外人员(访客)' }
      ],
      surveyList: [
        { label: '是否在沪【含上海所在区县（市）】', prop: 'inShFlag' },
        { label: '天是否离开当前所在地', prop: 'leavePossessionFlag', dayNum: 'leavePossessionDays' },
        { label: '天是否与确诊密接或已确诊', prop: 'confirmFlag', dayNum: 'confirmDays' },
        { label: '本人及同住人是否有发热、气喘、咳嗽、呼吸道症状', prop: 'symptomFlag' },
        { label: '当前健康状况是否异常', prop: 'healthFlag' },
        { label: '本人及同住人是否途径中风险地区', prop: 'passModerateAddr' },
        { label: '本人及同住人是否途径高风险地区', prop: 'passHightAddr' }
      ]
    }
  },
  computed: {
    title () {
      let temp = ''
      temp =
        this.drawerData.type === 'add'
          ? '新增'
          : this.drawerData.type === 'look'
            ? '查看'
            : '编辑'
      return temp + '高风险判断条件'
    }
  },
  created () {
    if (this.drawerData.type === 'look' || this.drawerData.type === 'edit') this.getPreventionRiskRulesDetail()
  },
  methods: {
    changeValue (value, key) {
      let val = this.ruleForm[key] === value ? '' : value
      this.ruleForm[key] = val
    },
    getPreventionRiskRulesDetail () {
      findPreventionRiskRulesDetail({ id: this.drawerData.id }).then(res => {
        this.ruleForm = {
          ...res.data,
          roleCode: res.data?.roleCode ? res.data?.roleCode.split(',') : [],
          antigenStatus: res.data?.antigenStatus || [],
          healthCodeStatus: res.data?.healthCodeStatus || [],
          nucleicAcidStatus: res.data?.nucleicAcidStatus || [],
          vaccineStatus: res.data?.vaccineStatus || []
        } || {}
      })
    },
    handleSave () {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let flag = false
          for (const key in this.ruleForm) {
            if ((this.ruleForm[key] !== null && key !== 'tiggerType' && this.ruleForm[key] instanceof Array && this.ruleForm[key].length !== 0) || (this.ruleForm[key] !== null && this.ruleForm[key].length !== 0 && key !== 'tiggerType')) {
              flag = true
              break
            }
          }
          if (!flag) return this.$message.warning('没有选择规则')
          let userInfo = localStorage.getItem('Standard__User-Info')
          this.ruleForm.tenantNo = JSON.parse(userInfo).value.tenantNo
          savePreventionRiskRules({ ...this.ruleForm, roleCode: this.ruleForm.roleCode.join(',') }).then((res) => {
            const { code, data } = res
            if (code === 0) {
              this.$message.success(`${this.drawerData.type === 'add' ? '新增' : '编辑'}规则成功`)
              if (data && data.refreshFalg === '1') {
                this.RefreshData(this.ruleForm.roleCode.join(','))
              } else {
                this.$emit('click-cancel', this.drawerData.type)
              }
            }
          })
        }
      })
    },
    RefreshData (roleCode) {
      if (!roleCode) return
      refreshRiskScreenData({ roleCode }).finally(() => {
        this.$emit('click-cancel', this.drawerData.type)
      })
    },
    handleCancel () {
      this.$emit('click-cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-radio-group {
    width: 107px;
    flex-shrink: 0;
  }
}
.border-bottom {
  border-bottom: 1px solid #eee;
}
</style>
